<template>

    <div style="margin-top: 0px; ">


        <el-form :model="formValue" ref="appJobFormEl" :rules="rules" label-width="100px"
            style="width: 80%; margin-top: 0px; ">

            <div style="
background-color: rgb(240, 255, 241);
border: 1px solid rgb(86, 150, 87);
color: #394e39;
text-align: center;
padding: 10px;
margin-bottom: 20px;
font-size: 14px;
            ">
                自动生成 增、删、查、改的基础性前端代码，减少重复工作量
            </div>

            <!--            <el-form-item label="适用的系统">-->
            <!--              <el-radio-group v-model="formValue.systemType">-->
            <!--                <el-radio label="apollo">apollo</el-radio>-->
            <!--                <el-radio label="asama">asama/kyubi</el-radio>-->
            <!--              </el-radio-group>-->
            <!--            </el-form-item>-->

            <el-form-item label="表单类型">
                <el-radio-group v-model="formValue.formType">
                    <el-radio label="dialog">弹窗式表单（适用于字段较少的页面）</el-radio>
                    <el-radio label="page">独立页面表单（字段较多的页面）</el-radio>
                </el-radio-group>
            </el-form-item>

            <!-- <el-form-item v-if="formValue.formType === 'page'" label="提交按钮样式">
                <el-radio-group v-model="formValue.saveBtnType">
                    <el-radio label="float">浮动到底部（页面较长时使用）</el-radio>
                    <el-radio label="follow">跟随表单</el-radio>
                </el-radio-group>
            </el-form-item> -->


            <el-form-item v-if="formValue.formType === 'page'" label="page目录" prop="fileDir" :rules="fileDirRule">
                <el-input v-model="formValue.fileDir" placeholder="/page/xxx/"></el-input>
            </el-form-item>


            <el-form-item label="输出文件名" prop="fileName">
                <el-input v-model="formValue.fileName" placeholder="不包含文件后缀"></el-input>
            </el-form-item>

            <el-form-item label="对象名称" prop="domainCnName">
                <el-input v-model="formValue.domainCnName" placeholder="中文名称"></el-input>
            </el-form-item>
            <!-- 
            <el-form-item label="表单 el_id" prop="formId">
                <el-input v-model="formValue.formId"></el-input>
            </el-form-item>
            <el-form-item label="表格 el_id" prop="gridPanelElId">
                <el-input v-model="formValue.gridPanelElId"></el-input>
            </el-form-item> -->
            <el-form-item label="查询列表 url" prop="listUrl">
                <el-input v-model="formValue.listUrl"></el-input>
            </el-form-item>
            <el-form-item label="详情页 url" prop="detailUrl">
                <el-input v-model="formValue.detailUrl"></el-input>
            </el-form-item>
            <el-form-item label="删除 url" prop="delUrl">
                <el-input v-model="formValue.delUrl"></el-input>
            </el-form-item>
            <el-form-item label="提交 url" prop="submitUrl">
                <el-input v-model="formValue.submitUrl"></el-input>
            </el-form-item>
            <el-form-item label="模型id键名" prop="idName">
                <el-input v-model="formValue.idName"></el-input>
            </el-form-item>

            <el-form-item label="" prop="codeContent">
                <template slot="label">java bean<br /> 代码片段
                    <br />
                    <el-popover placement="left" width="240" trigger="hover">
                        <pre>
/**
 * 姓名 
 */
private String name;

/**
 * 昵称
 */
private String nickname;

/**
 * 邮箱
 */
private String email;

/**
 * 手机号
 */
private Long phone; 

/**
 * 生日
 */
private Date birth; 
</pre>
                        <el-button slot="reference" type="text" class="el-icon-question">示例</el-button>
                    </el-popover>


                </template>
                <el-input v-model="formValue.codeContent" type="textarea" :rows="10"></el-input>
            </el-form-item>


            <el-form-item label="" prop="codeContent">
                <el-button type="primary" @click="submitForm">生成 vue 代码</el-button>
            </el-form-item>
        </el-form>


        <!--  在页面中定义以下组件 -->
        <ex-export-form ref="emsExportForm"></ex-export-form>
    </div>

</template>
<script>

export default {
    data() {
        return {
            dialogVisible: false,
            saveButtonDisabled: false,
            formValue: {

                'formId': 'formEl',
                'gridPanelElId': 'gridPanelEl',
                'listUrl': '/xxx-api/xxx/xxxRpc/selectAll.json',
                'detailUrl': '/xxx-api/xxx/xxxRpc/detail.json',
                'delUrl': '/xxx-api/xxx/xxxRpc/remove.json',
                'submitUrl': '/xxx-api/xxx/xxxRpc/saveUpdate.json',
                'domainCnName': '',
                'codeContent': '',
                'fileDir':'',
                'idName':'id',
                systemType: 'apollo',
                formType: 'dialog',

            },
            fileDirRule: [{ required: true, message: '目录不能为空', trigger: 'change' },
            { validator: (r, v, c) => { if (v.endsWith(this.formValue.fileName)) { return c("目录无需包含文件名") } c() }, trigger: 'change' }
            ],
            searchForm: {},
            rules: {


                'fileName': [{ required: true, message: '输出文件名不能为空', trigger: 'blur' }],
                // 'formId': [{ required: true, message: '请输入表单 el_id', trigger: 'blur' }],
                // 'gridPanelElId': [{ required: true, message: '请输入表格 el_id', trigger: 'blur' }],
                'listUrl': [{ required: true, message: '请输入查询列表 url', trigger: 'blur' }],
                'detailUrl': [{ required: true, message: '请输入详情页 url', trigger: 'blur' }],
                'delUrl': [{ required: true, message: '请输入删除 url', trigger: 'blur' }],
                'submitUrl': [{ required: true, message: '请输入提交 url', trigger: 'blur' }],
                'domainCnName': [{ required: true, message: '请输入对象名称', trigger: 'blur' }],
                'idName': [{ required: true, message: '模型id键名', trigger: 'blur' }],
                'codeContent': [{ required: true, message: '代码内容不能为空', trigger: 'blur' }]

            }
        };
    },

    created() {
        var _this = this;
    },

    destroyed() { },

    methods: {
        submitForm() {
            var _this = this;
            _this.saveButtonDisabled = true;

            console.log(_this.formValue)

            _this['$refs']['appJobFormEl'].validate(function (valid) {

                if (valid) {
                    // 触发下载操作
                    _this.$refs['emsExportForm'].doExport('/galileo-auto/vue/CodeRpc/generateCode.json', _this.formValue)

                } else {
                    _this.saveButtonDisabled = false
                    return false
                }
            });
        }


    }
}
</script>
<style>
.el-radio__label {
    font-size: 12px;
    padding-left: 10px;
}
</style>